<template>
  <div class="card" style="margin-bottom: 10px;">
    <el-input v-model="name" prefix-icon="Search" style="width: 300px; margin-right: 10px" placeholder="请输入活动名称查询"></el-input>
    <el-button type="primary" @click="load(1)">查询</el-button>
    <el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>
  </div>

  <div style=" margin-left: 50px ">
    <el-row>
      <el-col
          v-for="(item, index) in tableData"
          :key="item"
          :span="7"
          :offset="index % 3 > 0 ? 1 : 0"
      >
        <el-card :body-style="{ padding: '0px' }"  style="margin-top: 40px">
          <img
              :src="item.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
              style="max-width: 100%; height: 300px; object-fit: contain;"
              class="image"
          />
          <div style="padding: 14px;  display: flex; justify-content: space-between; align-items: center; " >
            <span>{{ item.name }}</span>
            <span >{{ item.price }}$</span>
          </div>
          <div>
            <div class="bottom" style="display: flex;justify-content: space-between; align-items: center; margin-top: 10px">
              <div class="description">{{ item.description  }} </div>
              <el-button  type="primary" @click="showContent(item)" >查看详情</el-button>
              <el-button style="margin-right: 10px" type="primary" @click="addShoppingCar(item)" >购票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <div style="margin: 10px 0">
    <div class="example-pagination-block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>

  <el-dialog
      v-model="activityVisible"
      title="活动详情"
      width="60%"
  >
    <div class="w-e-text">
      <div class="activity-details">
        <p><strong>活动名称:</strong> {{ activity.name }}</p>
        <p><strong>活动图片:</strong> <img :src="activity.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                                           alt="" style="width: 50px; height: 50px; border-radius: 50%; vertical-align: middle;"></p>
        <p><strong>活动票价:</strong> {{ activity.price }}</p>
        <p><strong>活动简介:</strong> {{ activity.description }}</p>
        <p><strong>活动时间:</strong> {{ activity.time }}</p>
        <p><strong>活动地点:</strong> {{ activity.location }}</p>
        <p><strong>活动内容:</strong>
          <div  v-html="activity.content"/>
        </p>
      </div>
      <div slot="footer" style="text-align: right;">
        <el-button @click="activityVisible = false">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script >
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: 'UserActivity',
  data() {
    return {
      currentDate: new Date(),
      activityVisible: false,
      name: '',
      user : JSON.parse(localStorage.getItem('honey-user')),
      tableData: [],
      activity: {},
      pageNum: 1,
      pageSize: 6,
      total: 0,
    }
  },
  created() {
    this.load(this.pageNum)
  },
  methods: {
    reset() {
      this.name = ''
      this.load(this.pageNum)
    },
    load(pageNum) { // 分页查询
      if (pageNum) {
        this.pageNum = pageNum;
      }
      request.get('/activity/selectByPage', {
        params: { pageNum: this.pageNum, pageSize: this.pageSize, name: this.name, showState: 1 }
      }).then(res => {
        if (res && res.data && typeof res.data === 'object') {
          this.tableData = res.data.list || [];
          this.total = res.data.total || 0;
          console.log("活动数据:", this.tableData);
        } else {
          console.error("无效的响应数据:", res);
          ElMessage.error('获取活动数据失败，请稍后再试');
        }
      }).catch(err => {
        console.error("获取活动数据失败:", err);
      });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    addShoppingCar(item) {
      ElMessageBox.confirm('确定要加入购物车吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        request.post('/order/add', {
          goodsName: item.name,
          number: 1,
          price: item.price,         // 假设item中有price字段
          userId: this.user.id,
          type: 0,
        }).then(response => {
          if (response.code === 1) {
            ElMessage.success('加入购物车成功');
          } else {
            ElMessage.error(response.msg);
          }
        });

      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消加入购物车',
        });
      });
    },
    pay(item) { // 支付
      console.log("订单详情:", item.orderNum);
      window.open(`http://localhost:9090/alipay/pay?orderNo=` + item.orderNum)
    },
    showContent(item) {
      this.activityVisible = true;
      this.activity = item;
    }
  }
}
</script>

<style>
.description {
  font-size: 12px;
  color: #cb2140;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
}
</style>
